<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
</head>
<body >
    <div id="app">

        <h2>{{msg}}</h2>
        <h1>{{msg}}</h1>
        <!--
            v-model:  作用: 用来绑定form表单标签中的value属性交给vue实例进行管理  input select  checkbox  button ...
        -->
        <input type="text" v-model="msg">


        <input type="button" value="改变data数据" @click="change">


    </div>
</body>
</html>
<!--引入vue js文件-->
<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//指定vue实例作用范围,
        data:{    //用来给vue实例定义数据
            msg:1,
        },
        methods:{//用来给vue实例定义事件处理函数
            change(){
                if (this.msg===10){
                    return
                }
                this.msg ++;
            }
        }
    });
</script>